import React from 'react';
import ReactDOM from 'react-dom'
import * as SuggestionAction  from '../../actions/SuggestionAction';
import { connect }  from 'react-redux';

class SuggestionSettingList extends React.Component {
  constructor(props) {
    super(props)
  }

  renderList() {
    var self = this;
    var content = [];
    if (this.props.data && this.props.data.length > 0) {
      this.props.data.forEach(function(data, index) {
        // console.log(data)
        // console.log(data)
        var time = new Date(data.created_at);
        var date;
        if (time) {
          date = time.toLocaleString();
        }
        var bindUnits = "";
        var bindUser = "";
        var bindMobile = "";
        for (var i = 0; i < data.units.length; i++) {
          var unit = data.units[i];
          // console.log(unit)
          if (i == 0) {
            bindUnits += '<p>' + unit.unit_desc + '</p>';
          }
          else {
            bindUnits += "<p>"+unit.unit_desc + '</p>';
          }
        }
        for (var i = 0; i < data.users.length; i++) {
          var user = data.users[i];
          if (i == 0) {
            bindUser += '<p>' + user.username + '</p>';
            bindMobile += user.mobile;
          }
          else {
            bindUser += "<p>" + user.username + '</p>';
            bindMobile += ", " + user.mobile;
          }
        }

        content.push((
          <tr>
            <td>{data.wechat_nickname}</td>
            <td className="reply-content">{data.content}</td>
            <td>{date}</td>
            <td dangerouslySetInnerHTML={{__html:bindUnits}}/>
            <td dangerouslySetInnerHTML={{__html:bindUser}}/>
            <td>{bindMobile}</td>
            <td><a className="info" onClick={(event)=>self.props.onReplyClick(data)}>{data.has_reply?"已回复":"回复"}</a></td>
          </tr>
        ))
      })
    }

    return content
  }

  render() {
    return(
      <div className="Suggestion-setting-list setting-list">
        <table className="table">
          <thead>
            <tr className="table-title">
              <th className="nickname">微信昵称</th>
              <th>反馈内容</th>
              <th>反馈日期</th>
              <th>用户绑定户号</th>
              <th>用户姓名</th>
              <th>用户手机</th>
              <th>回复</th>
            </tr>
          </thead>
          <tbody>
            {this.renderList()}
          </tbody>
        </table>
      </div>
    )
  }
}



export default SuggestionSettingList;
